// 导航
let box = document.querySelector(".box");
let nav = document.querySelector(".top");
let nav2 = document.querySelector(".top2");
let btn = document.querySelector(".btn");
// console.log(btn);

let daohang = nav.querySelector(".daohang");
let lis = daohang.querySelectorAll("ul li");
// console.log(lis);

// 点击切换导航栏高亮
lis.forEach(function (item, index) {
  item.onclick = function () {
    for (var i = 0; i < lis.length; i++) {
      lis[i].classList.remove("active");
    }
    this.classList.add("active");
    if (index == 2) {
      location.href = "../html/wisdom.html";
    }
    if (index == 3) {
      location.href = "../html/course.html";
    }
    if (index == 4) {
      location.href = "../html/tool.html";
    }
    if (index == 5) {
      location.href = "../html/case.html";
    }
    
  };
});

// 回到顶部
let customerService = document.querySelector(".customerService");
let back_top = customerService.querySelector(".back_top");

// 滚动切换导航栏
window.onscroll = function () {
  var y = scrollY;
  // 滚动页面到520px显示导航
  if (y >= 520) {
    nav.style.display = "none";
    nav2.style.display = "block";
  } else {
    nav.style.display = "block";
    nav2.style.display = "none";
  }

  // 滚动到450显示回到顶部按钮
  if (!(scrollY >= 450)) {
    back_top.style.display = "none";
    return;
  }
  back_top.style.display = "block";
};
// 点击跳转登录页面
btn.onclick = function () {
  location.href = "../html/login.html";
};

// 点击回到顶部
back_top.onclick = function () {
  scrollTo({ top: 0, behavior: "smooth" });
};

// 点击滚动到企业服务
lis[1].onclick = function () {
  scrollTo({ top: 550, behavior: "smooth" });
};

// 点击导航页面切换
let top2_container = document.querySelector(".top2_container");
let divs = top2_container.querySelectorAll("div");

divs = Array.from(divs);

//top2导航高亮切换
divs.forEach(function (item, index) {
  item.onclick = function () {
    for (var i = 0; i < divs.length; i++) {
      divs[i].classList.remove("active");
    }
    this.classList.add("active");
  };
});

// content2 页面切换
let daohang2 = document.querySelector(".daohang2");
let p = daohang2.querySelectorAll("p");
let service = document.querySelectorAll(".service");

p.forEach(function (item, index) {
  item.onmouseover = function () {
    for (var i = 0; i < p.length; i++) {
      p[i].classList.remove("active");
    }
    this.classList.add("active");
    // console.log(index);
    for (var j = 0; j < service.length; j++) {
      service[j].style.display = "none";
    }
    service[index].style.display = "block";
  };
});

//content2 list1数据 getData
let content2 = document.querySelector(".content2");
let list = content2.querySelector(".list");
let nav3 = list.querySelector(".nav");

// // https://console.e.360.cn/api/v1/eshop/GetGoodsList
getData();
async function getData() {
  let data = await pAjax({
    url: "/api/v1/eshop/GetGoodsList",
  });
  data = JSON.parse(data).data;
  // console.log(data);
  render(data);
}
function render(data) {
  // console.log(data);
  let str = "";
  data.forEach((item) => {
    str += `<div class="nav1">
                    <h5>${item.goods_name}</h5>
                    <p>${item.goods_desc}</p>
                    <span>${item.goods_price}</span>
                    <span>元起</span>
                    <div class="square">立即购买</div>
                  </div>`;
    nav3.innerHTML = str;
  });
}

//content2 list2数据渲染 getData
let list2 = content2.querySelector(".list2");
let con2 = list2.querySelector(".con2");

data_list2.forEach((item) => {
  let str = `
   <div class="item">
                  <img
                    src="	${item.image}"
                    alt=""
                  />
                  <div>
                    <div class="nav_title">${item.title}</div>
                    <div class="nav_text">
                     ${item.text}
                    </div>
                  </div>
                  <div class="square">查看详情</div>
                </div>`;
  con2.innerHTML += str;
});

//content2 list4数据渲染 getData
let list4 = content2.querySelector(".list4");
let nav4 = list4.querySelector(".nav");

data_list4.forEach((item) => {
  let str = `
   <div class="nav1">
                    <img
                      src="${item.image}"
                      alt=""
                    />
                    <div class="nav1_text">
                      ${item.text}
                    </div>
                    <div class="square">查看详情</div>
                  </div>
  `;
  nav4.innerHTML += str;
});

// content3 页面切换
// content3智慧营销数据渲染
let content3 = document.querySelector(".content3");
let daohang3 = content3.querySelector(".daohang3");
let p2 = daohang3.querySelectorAll("p");
let page = content3.querySelector(".page");

data_content3.forEach((item) => {
  let str = `
  <div class="list">
                <div class="con">
                  <div class="tupian">
                    <img
                      src="	${item.image}"
                      alt=""
                    />
                  </div>
                  <div class="nav">
                    <h5>${item.title}</h5>
                    <p class="qq">
                      ${item.text}
                    </p>
                    <div class="nav1">
                      <p>免费申请</p>
                      <p>查看详情</p>
                    </div>
                  </div>
                </div>
              </div`;
  page.innerHTML += str;
});

let lists = content3.querySelectorAll(".list");
// console.log(lists);

p2.forEach(function (item, index) {
  item.onmouseover = function () {
    for (var n = 0; n < p2.length; n++) {
      p2[n].classList.remove("active");
    }
    this.classList.add("active");
    for (var m = 0; m < lists.length; m++) {
      lists[m].style.display = "none";
    }
    lists[index].style.display = "block";
  };
});

// content4 精选课程数据渲染
let content4 = document.querySelector(".content4");
let content4_list = content4.querySelector(".list");
// console.log(content4_list);

data_content4.forEach((item) => {
  let str = `
  <div class="nav">
                <img
                  src="${item.image}"
                  alt=""
                />
                <p>${item.title}</p>
                <span>
                  ${item.text}
                </span>
                <div class="square">查看详情</div>
              </div>`;
  content4_list.innerHTML += str;
});

// content5 实用工具数据渲染
let content5 = document.querySelector(".content5");
let content5_list = content5.querySelector(".list");
// console.log(content5_list);

data_content5.forEach((item) => {
  let str = `<div class="nav">
                <img
                  src="	${item.image}"
                  alt=""
                />
                <span>${item.title}</span>
                <p>
                  ${item.text}
                </p>
                <div class="square">立即体验</div>
              </div>`;
  content5_list.innerHTML += str;
});

// content7 合作企业数据渲染
let content7 = document.querySelector(".content7");
let content7_ul = content7.querySelector("ul");
// console.log(content7_ul);

data_content7.forEach((item) => {
  let str = `<li>
                <img src="${item}" alt="" />
              </li>`;
  content7_ul.innerHTML += str;
});

// banner
let content = document.querySelector(".content");
let banners = document.querySelector(".banners");
let banner_img = document.querySelector(".banner_img");
let imgs = banner_img.querySelectorAll("img");
let dot = document.querySelector(".dot");

// 小圆点
let str = "";
imgs.forEach((item, index) => {
  if (index == 0) {
    str += `<li class="active"></li>`;
  } else {
    str += `<li></li>`;
  }
});
dot.innerHTML = str;

// 克隆第一个img添加到最后
let lastimgs = imgs[0].cloneNode(true);
banner_img.appendChild(lastimgs);

// 再次获取img的个数
imgs = banner_img.querySelectorAll("img");
// console.log(imgs);

let w = imgs[0].offsetWidth; //1349
let imglen = imgs.length; //4
banner_img.style.width = imglen * w + "px"; //5396px
// console.log(banner_img.style.width);

// 获取所有小圆点的li
let dotlis = dot.querySelectorAll("li");
let index = 0;
let flag = false;

let timer = setInterval(() => {
  index++;
  slideshow();
}, 5000);

// 点击小圆点的时候 也要改变left值
dotlis.forEach(function (item, idx) {
  item.onclick = function () {
    console.log(item);
    for (var i = 0; i < dotlis.length; i++) {
      dotlis[i].classList.remove("active");
    }
    this.classList.add("active");
    // console.log(-idx);
    banner_img.style.left = -idx * w + "px";
  };
  slideshow();
});

function slideshow() {
  // 排他思想：移出所有里的active，再给当前索引为index的li添加
  for (var i = 0; i < dotlis.length; i++) {
    dotlis[i].classList.remove("active");
  }
  if (index == imglen - 1) {
    dotlis[0].classList.add("active");
  } else {
    dotlis[index].classList.add("active");
  }
  move(banner_img, { left: -index * w }, function () {
    if (index == imglen - 1) {
      index = 0;
      banner_img.style.left = index * w + "px";
    }
    flag = false;
  });
}
